<script setup lang="ts">
defineOptions(SHARED_STYLE_OPTIONS);

interface IProps {
  label?: string;
  labelWidth?: string | number;
  borderBottom: boolean;
  labelPosition?: 'left' | 'top';
  required?: boolean;
}

withDefaults(defineProps<IProps>(), {
  labelWidth: 'auto',
  borderBottom: true,
  labelPosition: 'left',
  required: false,
});
</script>

<template>
  <up-form-item
    class="px-4"
    :label="label"
    :labelWidth="labelWidth"
    :borderBottom="borderBottom"
    :labelPosition="labelPosition"
    :required="required"
  >
    <slot></slot>
  </up-form-item>
</template>

<style lang="scss" scoped>
/* stylelint-disable-next-line selector-class-pattern */
:deep(.u-form-item__body__left__content__label) {
  font-size: 28rpx;
  color: #646566;
}
</style>
